<template>
  <div style="display: flex;justify-content: space-between">

    <template v-for="(data,index) in dataList">
      <router-link :to="data.url">
        <div class="waiting-card" >
          <div class="icon-img">
            <img v-if="index == 0" src="../../../../assets/images/dfcxs.png">
            <img v-if="index == 1" src="../../../../assets/images/lzsgdcl.png">
            <img v-if="index == 2" src="../../../../assets/images/wzsgdcl.png">
            <img v-if="index == 3" src="../../../../assets/images/djdsh.png">
            <img v-if="index == 4" src="../../../../assets/images/jjdfh.png">
            <img v-if="index == 5" src="../../../../assets/images/jjdfh.png">
          </div>
          <div class="txt-content">
            <div v-if="index == 0" class="txt" style="color: #0437ba">{{data.name}}</div>
            <div v-if="index == 1" class="txt" style="color: #e34d59">{{data.name}}</div>
            <div v-if="index == 2" class="txt" style="color: #00a870">{{data.name}}</div>
            <div v-if="index == 3" class="txt" style="color: #8a24ff">{{data.name}}</div>
            <div v-if="index == 4" class="txt" style="color: #ed7b2f">{{data.name}}</div>
            <div v-if="index == 5" class="txt" style="color: #ed7b2f">{{data.name}}</div>
            <div class="num">{{data.num}}</div>
          </div>
        </div>
      </router-link>
    </template>
    <!--    <el-table
          :data="dataList"
          v-loading="loading"
          style="width: 100%; padding-top: 6px"
          max-height="300"
          header-cell-class-name="ht-table-header-cell"
          header-row-class-name="ht-table-header-row"
          row-class-name="ht-table-row"
          cell-class-name="ht-table-row-cell"
        >
          <el-table-column prop="name" width="100" label="操作">
            <template slot-scope="scope">
              <router-link :to="scope.row.url">
                <span><el-button type="text">办理</el-button></span>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column prop="name" width="280" label="名称"></el-table-column>
          <el-table-column prop="num" width="150" label="数量"></el-table-column>
        </el-table>-->
    <!-- <ht-table
            ref="dataTable"
            :dictMap="dictMap"
            :showRightToolbar="false"
            :reqConfig="reqConfig"
            :tableBindColumns="tableBindColumns"
            :randomRowKey="true"
            :showPagination="false"
         /> -->

<!--    <el-row type="flex" class="row-bg" justify="space-around">-->
<!--      <el-col :span="4" v-for="data in dataList">-->
<!--        <div class="grid-content bg-purple">-->
<!--          <span class="iconfont-main">&#xe62a;</span>-->
<!--          <span class="name">{{data.name}}</span>-->
<!--          <span class="num">{{data.num}}</span>-->
<!--        </div>-->
<!--      </el-col>-->
      <!--      <el-col :span="4">
              <div class="grid-content bg-purple-light">
                <span class="iconfont">&#xe627;</span>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">
                <span class="iconfont">&#xe628;</span>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" >
                <span class="iconfont">&#xe626;</span>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <span class="iconfont">&#xe629;</span>
              </div>
            </el-col>-->
<!--    </el-row>-->
  </div>
</template>
<script>
import { toDoListData } from "@/api/cnaps/dashboard/index";
import { listPageMixin } from "@/libs/listPageMixin";
import "@/assets/iconfont/iconfont.css";
export default {
  name: "WaitDoing",
  mixins: [listPageMixin],
  data() {
    return {
      dataList: [],
      loading: false,
    };
  },
  mounted() {
    this.loading = true;
    toDoListData()
      .then((res) => {
        this.dataList = res.result;
        // 目前截取5个，6个超长
        if(this.dataList && this.dataList.length > 5){
          this.dataList = this.dataList.slice(0, 5);
        }
        this.loading = false;
      })
      .catch((res) => {
        this.loading = false;
      });
  },
  methods: {
    toPage(path) {
      this.$route.push(path);
    },
  },
};
</script>
<style lang="scss" scoped>

.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  /*background: #d3dce6;*/
}
.bg-purple-light {
  /*background: #e5e9f2;*/
}
.grid-content {
  position: relative;
  border-radius: 6px;
  border: 1px solid rgba(243, 243, 243, 1);
  box-sizing: border-box;
  min-height: 36px;
  padding:20px;
  height: 93px;
}
.grid-content .iconfont-main,.grid-content .name,.grid-content .num{
  position: absolute;
}
.grid-content .iconfont-main{
  /*top:10px;*/
  /*left:10px;*/
}.grid-content .name{
   left: 85px;
   color: rgb(4, 55, 186);
   font-size: 16px;
   font-family: PingFang SC;
 }.grid-content .num{
    left: 85px;
    top: 53px;
    font-size: 18px;
    font-weight: bold;
    font-family: D-DIN-DIN-Bold;
  }
.row-bg {
  padding: 10px 0;
  /*background-color: #f9fafc;*/
}

.iconfont-main {
  font-family: "iconfont" !important;
  font-size: 55px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.waiting-card {
  padding: 14px 18px;
  border-radius: 6px;
  border: 1px solid #f3f3f3;
  background: #ffffff;
  display: flex;
  &:hover {

    box-shadow: 0px 0px 20px #0437ba14;
  }

  .icon-img {
    img {
      width: 56px;
      height: 56px;
    }
  }
  .txt-content {
    margin-left: 16px;
    .txt {
      margin-top: 6px;
      color: #0437ba;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: -2%;
    }
    .num {
      margin-top: 10px;
      color: #000000e6;
      font-family: D-DIN-DIN-Bold;
      font-size: 20px;
      letter-spacing: -3%;
      font-weight: bold;
    }
  }
}


</style>
